{% extends 'core/base.html' %}
{% load staticfiles %}

{% block breadcrumb %}
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item">Projects</li>
        <li class="breadcrumb-item active">New Task</li>
{% endblock breadcrumb%}





{% block content %}
<div class="container animated fadeIn">
        <div class="row justify-content-center">
            <div class="col-7">
                <div class="card-group">
                    <div class="card p-4 mb-5">
                        <div class="card-body">
                            {% if created %}
                              <div class="alert alert-success alert-dismissible fade show" role="alert">
                                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                  </button>
                                  Congratulations, your task was created!
                              </div>
                            {% endif %}
                                {% csrf_token %}
                                <h1>Tasks</h1>
                                <p class="text-muted">Create your tasks here</p>
                                <form action="" method="post">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <label class="col-form-label">Project</label>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-puzzle-piece"></i></span>
                                            </div>
                                            {{ form.project }}
                                            {% if form.project.errors %}
                                                <ol>
                                                {% for error in form.project.errors %}
                                                    <li><strong>{{ error|escape }}</strong></li>
                                                {% endfor %}
                                                </ol>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-form-label">Assign. <i>Crtl+click for multiple selection</i></label>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-user"></i></span>
                                            </div>
                                            {{ form.assign }}
                                            {% if form.assign.errors %}
                                                <ol>
                                                {% for error in form.assign.errors %}
                                                    <li><strong>{{ error|escape }}</strong></li>
                                                {% endfor %}
                                                </ol>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-form-label">Task name</label>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-align-center"></i></span>
                                            </div>
                                            {{ form.task_name }}
                                            {% if form.task_name.errors %}
                                                <ol>
                                                {% for error in form.task_name.errors %}
                                                    <li><strong>{{ error|escape }}</strong></li>
                                                {% endfor %}
                                                </ol>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-form-label">Status</label>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-circle"></i></span>
                                            </div>
                                            {{ form.status }}
                                            {% if form.status.errors %}
                                                <ol>
                                                {% for error in form.status.errors %}
                                                    <li><strong>{{ error|escape }}</strong></li>
                                                {% endfor %}
                                                </ol>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-form-label">Due</label>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                            </div>
                                            {{ form.due }}
                                        </div>

                                        {% if form.due.errors %}
                                                <ol>
                                                {% for error in form.due.errors %}
                                                    <li><strong>{{ error|escape }}</strong></li>
                                                {% endfor %}
                                                </ol>
                                            {% endif %}
                                    </div>

                                    <div class="">
                                        <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
                                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                                    </div>
                                </form>
                            {{ form.errors }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}